<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
  	<!--不要将表单组直接和输入框组混合 使用，建议将输入框组嵌套到表单组使用-->
	<!-- .form-control类的input、textarea、select元素都将被默认设置宽度属性为100%，将label元素和前面提到的控件包裹在.form-group中可以获得最好的排列-->
	<div class="container">
		<form action="">
	  		<div class="form-group">
	  			<label for="emailInput">Email address</label>
	  			<input type="email" class="form-control" id="emailInput"/>
	  		</div>
	  		<div class="form-group">
	  			<label for="">File input</label>
	  			<input type="file" />
	  			<!--help-block 设置帮助文本-->
	  			<p class="help-block">Example block-level help text here</p>
	  		</div>
	  		<!--checkbox ：设置checkbox-->
	  		<div class="checkbox">
	  			<label for="">
	  				<input type="checkbox" /> check me out 
	  			</label>
	  		</div>
	  		<button type="submit" class="btn btn-default">submit</button>
	  	</form>
	</div>
  
<div class="container">
	<form action="" class="form-inline">
		<div class="form-group">
			<!--一定要为每个输入控件设置label标签，否则屏幕阅读器将无法正确识别，你可以通过为label设置 .sr-only 将其隐藏-->
			<!--如果不想显示label中的文字 可以使用sr-only隐藏 用placeholder显示-->
			<label for="" class="sr-only">username</label>
			<input type="text" class="form-control" placeholder="username" />
		</div>
		<div class="form-group">
			<label for="" class="sr-only">password</label>
			<input type="password" class="form-control" placeholder="password"/>
		</div>
		<div class="checkbox">
			<label for="">
				<input type="checkbox" /> Remember me
			</label>
		</div>
		<button type="submit" class="btn btn-default">Send invitation</button>
	</form>
</div>


<div class="container">
	<form action="" class="form-inline">

		<div class="form-group">
			<label for="" class="sr-only">Amount</label>
			<!--input-group: 将表单控件排成一排-->
			<div class="input-group">
				<div class="input-group-addon">$</div>
				<input type="text" class="form-control" />
				<div class="input-group-addon">.00</div>
			</div>
		</div>
		<button type="submit" class="btn btn-primary">Transfer cash</button>
	</form>
	
	
</div>
   
   
   	<div class="container">
   		<form action="">
   			<div class="form-group">
   				<label for="" class="col-md-2 control-label" >Email</label>
   				<div class="col-md-10">
   					<input type="email" class="form-control" placeholder="email"/>
   				</div>
   			</div>
   			<div class="form-group">
   				<div class="col-md-10 col-md-offset-2">
   					<div class="checkbox">
   						<label for="">
   							<input type="checkbox" />Remember me
   						</label>
   					</div>
   				</div>
   			</div>
   			<div class="form-group">
   				<div class="col-md-10 col-md-offset-2">
   					<button type="submit" class="btn btn-default">Sign in</button>
   				</div>
   			</div>
   		</form>
   	</div>
   	
   	<div class="container">
   		<textarea name="" rows="3" cols="" class="form-control"></textarea>
   		
   		<div class="checkbox">
   			<label for="">
   				<input type="checkbox" />xxx
   			</label>
   		</div>
   		<div class="checkbox disabled">
   			<label for="">
   				<input type="checkbox" disabled="disabled"/>
   				2222
   			</label>
   		</div>
   		<div class="raido">
   			<label for="">
   				<input type="radio" name="optionsRadios" checked="checked"/>
   				111
   			</label>
   		</div>
   		<div class="raido">
   			<label for="">
   				<input type="radio" name="optionsRadios" checked="checked"/>
   				222
   			</label>
   		</div>
   		<div class="raido">
   			<label for="">
   				<input type="radio" name="optionsRadios" checked="checked"/>
   				233
   			</label>
   		</div>
   	</div>
   	
   	<!--默认checkbox 和 radio 是占一行-->
   	<div class="container">
   		<!--内联  radio-inline 写在label上-->
   		<label for="" class="radio-inline">
   				<input type="radio" name="optionsRadios" checked="checked"/>
   				111
		</label>
		<label for="" class="radio-inline">
   				<input type="radio" name="optionsRadios" checked="checked"/>
   				222
		</label>
		<label for="" class="radio-inline">
   				<input type="radio" name="optionsRadios" checked="checked"/>
   				33
		</label>
   	</div>
   	
   	<div class="container">
   		<!--很多原生选择菜单，的圆角是无法通过修改border-radius来修改-->
   		<!--multiple 属性： 多选-->
   		<select name="" class="form-control" multiple>
   			<option value="">1</option>
   			<option value="">2</option>
   			<option value="">3</option>
   		</select>
   	</div>
   	
   	<div class="container">
   		<!--使用栅格的 form-group 要使用 form-horizontal 水平对齐-->
   		<form action="" class="form-horizontal">
   			<div class="form-group">
   				<label for="" class="col-md-2 control-label">Email</label>
   				<div class="col-md-10">
   					<!--form-group中文字 ：form-control-static 
   						label ： control-label
   						input ：form-control
   					-->
   					<p class="form-control-static">email@example.com</p>
   				</div>
   			</div>
   			
   			<div class="form-group">
   				<label for="" class="col-md-2 control-label">password</label>
   				<div class="col-md-10">
   					<input type="text" class="form-control" />
   				</div>
   			</div>
   		</form>
   	</div>
   
   	<div class="container">
   		
   		<form action="" class="form-inline">
   			<div class="form-group ">
   				<label for="" class="sr-only">email</label>
   				<p class="form-control-static">email xxx</p>
   			</div>
   			<!--校验状态 如has-warning has-error has-success 类到这些控件(control-label form-control help-block)的父元素极客 -->
   			<div class="form-group has-error">
   				<label for="" class="sr-only">input</label>
   				<input type="text" class="form-control" />
   			</div>
   			<button class="btn btn-default">confirm identify</button>
   			<input type="text" class="form-control "  />
   		</form>
   		
   		
   	</div>
   	
   	
   	<style>
   		.form-control{
   			outline: none;
   		}
   		.form-control:focus{

   			box-shadow: 5px 5px 5px red;
   		}
   	</style>
   	
   	<div class="container">
   		<form action="">
   			<fieldset id=""  disabled>
	   			<legend>11</legend>
	   			dfsafdsa
	   			
	   		</fieldset>
   		</form>
   	</div>
   <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </body>
</html>